<template>
  <div>
    <!-------------------------------表格 ----------------------down ------------------->
    <el-card :body-style="{padding:'0px 8px'}" style="background-color: #f3f3f3">
      <!-------------------------------按钮 ----------------------down------------------->
      <div>
        <el-button icon="el-icon-edit" type="info" @click="add">新建</el-button>
        <el-date-picker
          v-model="query.sddate"
          class="search-inp"
          align="left"
          type="date"
          placeholder="起始日期"
        />
        <el-date-picker
          v-model="query.eddate"
          class="search-inp"
          align="right"
          type="date"
          placeholder="结束日期"
        />
        <el-input v-model="query.name" class="search-inp" placeholder="方案名称" />
        <el-input v-model="query.cinvcode" class="handle-input" style="width: 150px;" placeholder="产品编码" />
        <el-input v-model="query.ccode" class="search-inp" placeholder="来料单号" />
        <el-select
          v-model="query.zjStatus"
          style="width: 100px"
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-button class="hand-btn" type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
      </div>
      <!-------------------------------按钮 ----------------------up ------------------->
      <el-card>
        <el-table
          ref="multipleTable"
          v-loading="loadingMTable"
          max-height="560"
          height="560"
          :cell-style="{'padding':'2px','font-size':'12px'}"
          :header-cell-style="{'padding':'0px','font-weight':'800'}"
          :data="page.content"
          style="width: 100%"
          border
          class="table"
          header-cell-class-name="table-header"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <el-table-column width="80" prop="shpanding" label="总检" />
          <el-table-column width="160" prop="ddate" label="来料日期" />
          <el-table-column width="120" prop="ccode" label="来料单号" />
          <el-table-column width="120" prop="cinvcode" label="产品编码" />
          <el-table-column width="300" prop="cinvname" label="产品名称" />
          <el-table-column width="230" prop="cvenname" label="供应商名称" />
          <el-table-column width="80" prop="zjStatus" label="状态" />
          <el-table-column width="80" prop="createBy" label="创建人" />
          <el-table-column width="160" prop="createTime" label="创建时间" />
          <el-table-column width="130" prop="projectName" label="方案名称" />
          <el-table-column width="130" prop="cdepname" label="部门名称" />
          <el-table-column label="操作" width="280" align="right" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handlePrint(scope.$index, scope.row)"
              >打印</el-button>
              <el-button
                v-show="'待审核' === scope.row.zjStatus"
                type="text"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button>
              <el-button
                type="text"
                icon="el-icon-view"
                style="color: #1ab394"
                @click="handleView(scope.$index, scope.row)"
              >查看</el-button>
              <el-button
                type="text"
                icon="el-icon-edit"
                @click="copyBill(scope.$index, scope.row)"
              >复制</el-button>
              <el-button
                type="text"
                icon="el-icon-edit"
                style="color: #fdbc07"
                @click="qualityBill(scope.$index, scope.row)"
              >总检</el-button>
              <el-button
                type="text"
                icon="el-icon-delete"
                class="red"
                @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            layout="total,sizes, prev, pager, next"
            :page-sizes="[10,20, 30, 40, 50]"
            :current-page="query.pageIndex"
            :page-size="query.pageSize"
            :total="page.totalElements"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
        </div>
      </el-card>
    </el-card>
    <!-------------------------------表格 ----------------------up ------------------->
    <!----------------------------------form 表单------------------down----------- -->
    <el-dialog :visible.sync="editVisible">
      <el-form ref="form" :model="form" label-width="50px">
        <el-form-item label="备注" prop="shremark">
          <el-input v-model="form.shremark" />
        </el-form-item>
        <el-form-item label="判定" prop="shpanding">
          <el-radio-group v-model="form.shpanding">
            <el-radio label="合格">合格</el-radio>
            <el-radio label="不合格">不合格</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="text-align:right">
        <el-button class="hand-btn" type="info" @click="editVisible = !editVisible">取消</el-button>
        <el-button class="hand-btn" type="success" @click="saveEdit">保存</el-button>
      </div>
    </el-dialog>
    <!-------------------------------form表单----------------------up ------------------->

    <el-dialog :visible.sync="showView" width="1000px">
      <div>
        <el-button v-print="print" icon="el-icon-printer" size="medium">打印</el-button>
        <div style="text-align: center">
          <div style="font-size: 20px"><span>广东金莱特智能科技有限公司</span></div>
          <div style="font-size: 17px">来料质检报告</div>
        </div>
        <div style="display: flex;justify-content: space-between;margin-right: 10px">
          <div>
            供应商：{{ form.cvenname }}
          </div>
          <div>
            编号:NO0000639
          </div>
        </div>
        <div id="tbody">
          <div style="border-width: 2px;border-color: #2e2e2e;border-style: solid;padding: 10px">
            <div style="display: flex;justify-content: space-around">
              <div class="divInline"><div>物料名称</div><div class="downline" style="width: 230px">{{ form.cinvname }}</div></div>
              <div class="divInline"><div>规格型号</div><div class="downline">{{ form.cinvstd }}</div></div>
              <div class="divInline"><div>来料数量</div><div class="downline" style="width: 110px">{{ form.qty }}</div></div>
              <div class="divInline"><div>来料日期</div><div class="downline" style="width: 110px">{{ form.ddate }}</div></div>
            </div>
            <div style="display: flex;justify-content: space-around">
              <div class="divInline"><div>单号</div><div class="downline">{{ form.ccode }}</div></div>
              <div class="divInline"><div>应用机型</div><div class="downline">{{ form.csoinvname }}</div></div>
              <div class="divInline"><div>材料类别</div><div class="downline">{{ form.productType }}</div></div>
              <div class="divInline"><div>抽检数量</div><div class="downline">{{ form.qc }}</div></div>
            </div>
            <div style="display: flex;justify-content: space-between">
              <div class="divInline">
                <div>检验类型：</div>
                <div>全检<el-checkbox /></div>
                <div>抽检<el-checkbox /></div>
                <div>抽检级别</div><div class="downline">5646</div>
              </div>
              <div class="divInline">
                <div>A</div><div class="downline">{{ form.aqla }}</div>
                <div>A</div><div class="downline">{{ form.aca }}/{{ form.rea }}</div>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between">
              <div class="divInline">
                <div>检测依据：</div>
                <div class="downline" style="width: 200px">原材料标准及作业指导书</div>
                <div><el-checkbox /></div>
              </div>
              <div class="divInline">
                <div>B</div><div class="downline">{{ form.aqlb }}</div>
                <div>B</div><div class="downline">{{ form.acb }}/{{ form.reb }}</div>
              </div>
            </div>
            <div style="display: flex;justify-content: space-between">
              <div class="divInline">
                <div style="width: 70px" />
                <div class="downline" style="width: 200px">检验样板</div>
                <div><el-checkbox /></div>
              </div>
              <div class="divInline">
                <div>B</div><div class="downline">{{ form.aqlc }}</div>
                <div>B</div><div class="downline">{{ form.acc }}/{{ form.rec }}</div>
              </div>
            </div>
          </div>
        </div>
        <el-table
          :data="form.entitys"
          tooltip-effect="dark"
          border
          style="width: 100%;"
        >
          <el-table-column
            type="index"
            label="项次"
            width="50"
          />
          <el-table-column
            prop="planName"
            width="150px"
            label="测试项目"
          />
          <el-table-column
            prop="quotaName"
            width="150px"
            label="测试指标"
          />
          <el-table-column
            prop="specs"
            width="150px"
            label="规格"
          />
          <el-table-column
            prop="pda"
            width="50px"
            label="A"
          />
          <el-table-column
            prop="pdb"
            width="50px"
            label="B"
          />
          <el-table-column
            prop="pdc"
            width="50px"
            label="C"
          />
          <el-table-column
            prop="judge"
            width="90px"
            label="系统"
          />
          <el-table-column
            prop="result"
            width="110px"
            label="人工"
          />
          <el-table-column
            prop="remark"
            width="110px"
            label="备注"
          />
        </el-table>
        <table border="1">
          <tr>
            <td rowspan="4" width="10px">
              评审员
            </td>
            <td width="200px">
              PMC部门
            </td>
            <td width="200px">
              123
            </td>
            <td width="500px">
              生产使用级别：特急<el-checkbox />急<el-checkbox />一般<el-checkbox />
            </td>
          </tr>
          <tr>
            <td>
              市场部（包装类）
            </td>
            <td>
              123
            </td>
            <td>
              处理意见：退货<el-checkbox />特采<el-checkbox />挑选/加工<el-checkbox />
            </td>
          </tr>
          <tr>
            <td>
              QEM（电池）
            </td>
            <td>
              123
            </td>
            <td>
              处理意见：退货<el-checkbox />特采<el-checkbox />挑选/加工<el-checkbox />
            </td>
          </tr>
          <tr>
            <td>
              采购部
            </td>
            <td>
              123
            </td>
            <td>
              处理意见：退货<el-checkbox />特采<el-checkbox />挑选/加工<el-checkbox />
            </td>
          </tr>
          <tr>
            <td colspan="5">说明：</td>
          </tr>
          <tr>
            <td colspan="5">
              <div style="display: flex;justify-content: space-between">
                <div>审批/日期：</div>
                <div>退货：<el-checkbox />特采：<el-checkbox />挑选/加工：<el-checkbox /></div>
              </div>
            </td>
          </tr>
        </table>
        <div>
          注：①若不合格，评审清单需由品质部审批；
          ②包装材料由市场部、电池由技术部签字确认；
          ③此表由IQC存档。
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { query } from '@/api/quality'
import { save } from '@/api/quality'
import { delbyid } from '@/api/quality'
export default {
  name: 'InComeIndex',
  data() {
    return {
      showView: false,
      shenheAble: false,
      drawer: false,
      loadingMTable: false,
      editVisible: false,
      form: {},
      options: ['', '待审核', '已质检'],
      query: {
        pageIndex: 1,
        pageSize: 20,
        sddate: new Date(),
        eddate: new Date(),
        name: ''
      },
      page: {}
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    getData() {
      this.loadingMTable = true
      query(this.query).then(res => {
        this.loadingMTable = false
        this.page = res.data.page
      })
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1)
      this.getData()
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      }).then(() => {
        delbyid(row.id).then(res => {
          this.$message.success('删除成功')
          this.getData()
        })
      })
        .catch(() => {
        })
    },
    // 编辑操作
    handleEdit(index, row) {
      this.$router.push({ path: 'incomeEdit', query: { id: row.id }})
    },
    copyBill(index, row) {
      this.$router.push({ path: 'incomeEdit', query: { id: row.id, copy: true }})
    },
    handleView(index, row) {
      this.$router.push({ path: 'incomeView', query: { id: row.id }})
    },
    handlePrint(index, row) {
      this.form = row
      this.showView = true
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val)
      this.getData()
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.$set(this.query, 'pageSize', val)
      this.getData()
    },
    add() {
      this.$router.push({ path: 'incomeEdit' })
    },
    qualityBill(index, row) {
      this.editVisible = true
      this.form = row
    },
    saveEdit() {
      if (!this.form.shpanding) {
        this.$message.warning('请填写总评')
        return
      }
      this.loading = true
      this.form.zjStatus = '已质检'
      save(this.form).then(res => {
        this.loading = false
        this.editVisible = false
        this.$message.success(res.message)
        this.getData()
      })
    }
  }
}
</script>

<style scoped>
  .handle-box {
    margin: 20px;
  }

  .handle-select {
    width: 120px;
  }

  .handle-input {
    margin: 10px;
    width: 300px;
    display: inline-block;
  }
  .table {
    width: 100%;
    font-size: 14px;
  }
  .red {
    color: #ff0000;
  }
  .hand-btn {
    margin: 5px;
  }
  .divInline{
    display: flex;
    height: 20px;
    margin-top: 5px;
  }
  .downline{
    width: 160px;
    border-width: 0 0 1px 0;
    border-color: #2e2e2e;
    border-style: solid;
    text-align: center
  }
</style>
